<template>
    <div class="plateKeyboard" v-if="keyBoardState">
        <!-- 遮罩层 -->
        <div class="overload" @click="clickOverload"></div>
        <!--S 输入框 -->
        <div class="hd">
            <p class="title">请输入车牌</p>
            <div class="plateKeyboard-input">
                <span v-for="(item,index) in cardNo" :key="index" :class="{active:currentIndex==index}" @click="clickItem(index)"><em>{{item}}</em></span> 
            </div> 
            <div class="plateKeyboard-btn">
                <input type="checkbox" id="newEnery" @click="newEnery"> <label for="newEnery" class="new-enery-label">新能源车牌</label></div>
            </div>
        <!--E 输入框 -->
        <div class="bd">
            <div class="plateKeyboard-end" @click="complete">完成</div>
            <ul class="plateKeyboardUl" v-if="type=='txt'" >
                <li v-for="(items,index) in cartxt" :key="index">
                    <a @click="clickKeyBoard(value)" v-for="(value,ind) in items" :key="ind" href="javascript:;">{{value}}</a>
                </li>
            </ul>
            <ul class="plateKeyboardUl" v-if="type=='num'">
                <li v-for="(items,index) in numtxt" :key="index">
                    <a @click="clickKeyBoard(value)" v-for="(value,ind) in items" :key="ind" href="javascript:;">{{value}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "carKey",
    data() {
        return {
            keyBoardState: false,
            isNewEnery: false,
            currentIndex: 0,
            type:"txt",  //txt 省份  num数字
            cardNo:['粤','','','','','',''],
            cartxt:[
                ['京','津','渝','沪','冀','晋','辽','吉','黑','苏'],
                ['浙','皖','闽','赣','鲁','豫','鄂','湘','粤','琼'],
                ['川','贵','云','陕','甘','青','蒙','桂','宁','新'],
                ['藏','使','领','警','学','港','澳', '']
            ],
            numtxt:[
                ['1','2','3','4','5','6','7','8','9','0'],
                ['Q','W','E','R','T','Y','U','I','O','P'],
                ['A','S','D','F','G','H','J','K','L','澳'],
                ['Z','X','C','V','B','N','M','港', '']
            ]
        }
    },
    watch:{
        currentIndex() {
            //判断键盘类型
            if(this.currentIndex==0) {
                this.type = "txt";
            }else {
                this.type = "num";
            }
        }
    },
    methods: {
        closeKey() {
            this.cardNo = ['粤','','','','','',''];
            this.currentIndex = 0;
            this.keyBoardState = false;
        },
        openKey() {
            this.keyBoardState = true;
        },
        //点击遮罩层
        clickOverload() {
            this.closeKey();
        },
        newEnery() {
            const checkedVal = event.target.checked;
            this.isNewEnery = checkedVal;
            if(checkedVal) {
                this.$set(this.cardNo,7,"");
            }else{
                this.$delete(this.cardNo,7);
            }
        },
        clickItem(index) {
            this.currentIndex = index;
        },
        clickKeyBoard(val) {
            //点击删除
            if(val=="") {
                if(this.currentIndex>0) {
                    this.currentIndex--;
                    this.$set(this.cardNo,this.currentIndex,"");
                };
            }else{ //点击输入
                //输入后下标+1
                if(this.currentIndex<this.cardNo.length){
                    //数组元素通过手动更新
                    this.$set(this.cardNo,this.currentIndex,val);
                    this.currentIndex++;
                }
            }
        },
        //点击完成按钮
        complete() {
            if(this.checkFormat()) {
                this.$emit("getCarNo",this.cardNo.join(""));
            };
        },
        checkFormat() {
            const cardNo = this.cardNo.join("");
            const reg = this.isNewEnery? /^[a-zA-Z][\w]{5}[\w澳港]{1}$/ : /^[a-zA-Z][\w]{4}[\w澳港]{1}$/;
            if(cardNo==""||cardNo.length<7||cardNo.length<8&&this.isNewEnery) {
                this.$toast.message({
                    message: "请输入完整的车牌",
                    color: '#F57979'
                });
                return;
            }
            if(reg.test(cardNo)) {
                this.$toast.message({
                    message: "车牌格式不正确，检查后重新输入",
                    color: '#F57979'
                });
                return;
            }
            return true;
        }

    },
}
</script>

<style scoped lang="scss">
.plateKeyboard{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    .hd {
        position: relative;
        z-index: 100;
        font-size: 16px;
        color: #555;
        text-align: center;
        max-width: 80%;
        width: 350px;
        margin: 160px auto 0;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        .title{
            line-height: 50px;
        }
    }
}
.plateKeyboard .bd {
    background: #c9ced7;
    padding: 10px 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100
}

.overload{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5)

}

.plateKeyboard .plateKeyboard-input {
    border: solid 1px #ccc;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px 6px 10px 0;
    display: inline-block;
    margin: 0 auto;
    position: relative
}

.plateKeyboard .plateKeyboard-input span {
    position: relative;
    width: 32px;
    height: 19px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    border-right: solid 1px #ccc;
    margin: 3px;
    text-align: center;
    margin-right: -3px
}

.plateKeyboard .plateKeyboard-input span:last-child {
    border: 0
}

.plateKeyboard .plateKeyboard-input span em {
    position: absolute;
    top: 0;
    bottom: -2px;
    right: 6px;
    left: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    font-style: normal
}

.plateKeyboard .plateKeyboard-input span.active em {
    border-bottom: 1px solid #41aaf2
}

.plateKeyboard .plateKeyboard-btn {
    font-size: 0;
    text-align: right;
    margin: 5px 0;
    width: 80%;
    color: black;
    line-height: 80px;
    margin: 0 auto;
}

.plateKeyboard .plateKeyboard-btn input {
    vertical-align: middle
}

.plateKeyboard .plateKeyboard-end {
    text-align: right;
    padding: 0 2% 0 0;
    background: #fff;
    position: relative;
    top: -10px;
    line-height: 40px;
    color: #4897fa;
    font-size: 14px;
}

.plateKeyboard ul li:nth-child(4) a:last-child {
    background: #acb2bc url(../../assets/img/keyboradicon.png) center no-repeat;
    background-size: 39% auto;
    text-indent: -9999px;
    float: right;
    margin-right: 1.5%;
    width: 18.5%
}

.plateKeyboard li {
    text-align: left;
    margin-left: 1.5%
}

.plateKeyboard li a {
    display: inline-block;
    width: 8.5%;
    height: 40px;
    line-height: 40px;
    margin-top: 6px;
    font-size: 18px;
    background: #fff;
    margin: .7%;
    text-align: center;
    border-radius: 5px;
    color: #333
}

.plateKeyboard li a.gray {
    background-color: #EBEBEB
}

.plateKeyboard-btn #newEnery {
    display: none
}

.plateKeyboard-btn .new-enery-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 22px;
    line-height: 15px;
    font-size: 14px
}

.plateKeyboard-btn .new-enery-label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    border: 1px solid #ddd;
    background-color: #fff
}

.plateKeyboard-btn #newEnery:checked+.new-enery-label:before {
    content: "\2713";
    font-size: 15px;
    color: #4897fa;
    text-align: center;
    line-height: 15px
}
</style>
